<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2020-03-21 14:41:46
 * @LastEditTime: 2020-04-26 22:10:53
 * @FilePath: \blog-pages\src\views\admin\Login.vue
 * @Description: 管理页面登录
 -->
<template>
  <b-card img-top class="login-card">
    <p class="font-weight-bold text-secondary text-center">博客后台管理</p>
    <b-form-group label="用户名" class="text-muted">
      <b-form-input v-model="username" placeholder="请输入用户名" type="text"></b-form-input>
    </b-form-group>
    <b-form-group label="密码" class="text-muted">
      <b-form-input v-model="password" placeholder="请输入密码" type="password"></b-form-input>
    </b-form-group>
    <hr />
    <b-btn variant="outline-primary" @click="login">登录</b-btn>
  </b-card>
</template>
 
 <script>
import urls from "../../request/url";
import { mapMutations, mapState } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  computed: {
    ...mapState({
      adminToken: state => state.app.adminToken
    })
  },
  methods: {
    ...mapMutations(["setAdminToken"]),
    login() {
      this.$axios
        .post(urls.admin.user, {
          username: this.username,
          password: this.password
        })
        .then(res => {
          res = res.data;
          if (res.code == 20000) {
            this.setAdminToken(res.msg);
            this.$router.push("/admin/");
          } else {
            this.$bvToast.toast("用户名或密码错误", {
              title: "提示",
              variant: "danger",
              solid: true,
              toaster: "b-toaster-top-center"
            });
          }
        });
    }
  },
  created() {
    if (this.adminToken) {
      this.$router.replace("/admin/");
    }
  }
};
</script>
 
 <style scoped>
.main {
  padding-top: 100px;
}
.login-card {
  width: 300px;
  margin: auto;
  margin-top: 100px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}
</style>
